import React from 'react'
import { actions } from 'mirrorx'
import { Form, Table } from 'antd'
import api from '../../../api'
import './index.scss'

class CouponDetail extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      qrcode: '',
      currentPage: 1,
      pageSize: 10,
      couponId: '',
      couponList: []
    }
    this.pageChange = this.pageChange.bind(this)
  }
  componentDidMount () {
    let couponId = T.urlQuery('id', window.location.href) || ''
    let couponName = T.urlQuery('name', window.location.href) || ''
    this.setState({
      couponId,
      couponName
    }, () => {
      this.queryGoodsPromoPage()
    })
  }
  queryGoodsPromoPage (promoBatchId) {
    // 根据优惠券的批次ID获取列表。
    let { currentPage, pageSize, couponId } = this.state
    T.ajax({
      url: api.queryGoodsPromoPage.path,
      data: {
        pageIndex: currentPage,
        pageSize,
        condition: {
          partnerId: true,
          promoBatchId: couponId
        }
      }
    }).then(res => {
      if (res.code === 0) {
        let { rowTotal, rows } = res.data
        this.setState({
          couponList: rows,
          rowTotal: rowTotal
        })
      }
    })
  }
  pageChange (currentPage) {
    this.setState({ currentPage: currentPage.current }, () => {
      this.queryGoodsPromoPage()
    })
  }
  render () {
    let { couponList, rowTotal, couponName } = this.state
    const columns = [
      { title: 'Promo Code', key: 'promoCode', dataIndex: 'promoCode' },
      { title: 'Value(SGD)', key: 'value', dataIndex: 'value' },
      { title: 'Received User', key: 'receiveUserName', dataIndex: 'receiveUserName' },
      { title: 'Received Time', key: 'gmtCreated', dataIndex: 'gmtCreated' },
      { title: 'Used Time', key: 'usedTime', dataIndex: 'usedTime' },
      { title: 'Order Number', key: 'orderNum', dataIndex: 'orderNum' },
      { title: 'Status',
        key: 'statusName',
        align: 'center',
        with: '110px',
        dataIndex: 'statusName',
        render: (value, record) => {
          let classNameList = {
            1: 'recived-status',
            2: 'frozen-status',
            3: 'used-status',
            99: 'expired-status'
          }

          return <div
            className={classNameList[record.status] + ' status-circle'}>
            {value}
          </div>
        } }
    ]
    return <div>
      <div className='coupon-detail'>
        <div className='nav'>
          <a onClick={() => { actions.routing.push({ pathname: '/page-promo-code' }) }}> Marketing</a>  /
           Detail
        </div>
        <div className='f20 mt18 mb18'>{couponName}</div>
        <div className='coupon-detail-list'>
          <Table
            pagination={{
              showQuickJumper: true,
              total: rowTotal
            }}
            bordered
            onChange={this.pageChange}
            dataSource={couponList}
            columns={columns} />
        </div>
      </div>
    </div>
  }
}

export default Form.create()(CouponDetail)
